<template>
  <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
    <bm-marker :position="center" :dragging="true" @click="infoWindowOpen">
      <bm-info-window :show="show"  @close="infoWindowClose" @open="infoWindowOpen"> 
          <div>设备标识: <span style="color: slategrey">TEST1</span></div>
          <div>设备名称: <span style="color: slategrey">测试1号</span></div>
          <div>设备位置: <span style="color: slategrey">广东省深圳市南山区南海大道3688号</span></div>
      </bm-info-window>
    </bm-marker>
  </baidu-map>
</template>
<script>
export default {
  data() {
    return {
      center: { lng: 113.931269, lat: 22.514893 },
      zoom: 3,
      show: false
    };
  },
  methods: {
    handler({ BMap, map }) {
      console.log(BMap, map);
      this.center.lng = 113.931269
      this.center.lat = 22.514893;
      this.zoom = 15;
    },
    infoWindowClose () {
      this.show = false
    },
    infoWindowOpen () {
      this.show = true
    }
  },
};
</script>
<style scoped>
.map {
  width: 100%;
  height: 300px;
}
</style>